<template>
  <el-dialog :title="chooseName" @close="close" :close-on-click-modal="false" :visible.sync="visible" width="80%" :before-close="handleClose">
    <div style="min-height:350px;">

      <!-- 安全域 -->
      <fire-tab v-if="security" @list="list" @hideClose="hideClose" @jsonTop="jsonTop" @showflag="showflag" @deleteMomain="deleteMomain" :allManifold="allManifold" ref="fireinit"></fire-tab>
      <!-- 服务链 -->

      <server-tab v-if="serShow" @fire="fire" :sevData="sevData" ref="addel" @jsonBottom="jsonBottom" @toMain="toMain" @firetwo="firetwo"  @VPNDataset = "VPNDataset" v-bind:nameFromChild="nameFromChild"></server-tab>
      <el-button type="primary" v-show="allBut" v-if="this.chooseName !== '详情'" @click="allNum('/order/receiveOrderMsg')">保 存</el-button>
      <el-button type="success" v-show="allBut" v-if="this.chooseName !== '详情'" @click="allNum('/order/executeOrder')">执 行</el-button>
    </div>
    <!-- <el-row> -->
  </el-dialog>
</template>

<script>
    import { Loading } from 'element-ui'
    import fireTab from "./firetab.vue"
    import serverTab from "./servertab.vue"
    export default {
        name: 'mywork',
        data () {
            return {
                flagBut: false,
                sevData: {}, // 服务链数据
                visible: false, // dialog开关
                nameFromChild: [], // 获取安全域数据
                allBut:false,
                serShow: false, // 服务域渲染
                security: false, // 安全域渲染
                freVisible: false,
                jianitng01: false,
                jianitng02: false,
                allManifold: {},
                chains: [],
                ben: false,  // 判断安全链是否保存
                chooseName: '',
                options: {
                    fullscreen: true,
                    lock: true,
                    // spinner:'el-icon-loading',
                    text: '加载中...',
                      fontSize:'28px',
                    background: 'rgba(0, 0, 0, .3)'
                }
            }
        },
        methods: {
            handleClose () { // 关闭Dialog
                this.visible = false
            },
            close () { // 关闭弹出框
                this.$emit('addVisible', this.freVisible)
            },
            hideClose (val) { // 接口异常关闭弹框
                this.close()
            },
            VPNDataset (data) {
                this.vpn = data
            },
            firetwo (value, index) {
                this.vpnflag = true
            },
            toMain (val1, val2) {
                this.vnfId = val1
                this.vnfIndex = val2
            },
            jsonBottom (value, ben) {
                this.chains = value
                this.ben = ben
            },
            fire (value, index) { // 判断点击是防火墙还是VPN
                if (value.label === "防火墙") {
                    this.dialogFormVisible = true
                } else if (value.label === "VPN") {
                    this.vpnflag = true
                }
            },
            deleteMomain (val) { // 删除安全域
                this.nameFromChild.splice(val,1)
            },
            showflag (val) { // 安全域>1展示服务链
                this.allBut = val
                this.serShow = true
                this.$nextTick(() => {
                    this.$refs.addel.openServer(val)
                })
            },
            jsonTop (value) { // 输出安全域所有信息
                console.log(value, 'a098765432')
                this.firetab = value
            },
            list (val) {
                this.nameFromChild = val
            },
            allNum (val) { // 保存按钮
                if (this.flagBut) {
                    return;
                }
                let params = {
                    actionType: 0,
                    chains: this.chains || [], // 安全链
                    domains: this.firetab || [], // 安全域
                    inuse: true,
                    sequenceId: this.allManifold.details ? this.allManifold.domains.sequenceId : '',
                    serviceId : this.allManifold.details ? this.allManifold.domains.serviceId : '',
                    state:  this.allManifold.details ? this.allManifold.domains.state : '',
                    orderId: this.allManifold.details ? this.allManifold.domains.orderId : '',
                    stateMessage: this.allManifold.details ? this.allManifold.domains.stateMessage : '',
                    updatetime: this.allManifold.details ? this.allManifold.domains.updatetime : 0,
                    userId: 444
                }
                if (this.chooseName === '修改') {
                    params.orderId = this.sevData.domains.orderId
                }
                params.actionType = this.chooseName === "新增" ? 0 : this.chooseName === '修改' ? 1 : 2
                if (params.domains.length > 0 && params.chains) {
                    for (let i = 0; i < params.domains.length; i++) {
                        if (params.domains[i].showRight === true) {
                            this.$message({
                                showClose: false,
                                message: '请保存安全域数据',
                                type: 'warning'
                            })
                            this.jianitng01 = false
                            break;
                        } else {
                            this.jianitng01 = true
                        }
                    }
                    if (this.ben === false) {
                        this.$message({
                            showClose: false,
                            message: '请保存服务链数据',
                            type: 'warning'
                        })
                    } else {
                        this.jianitng02 = true
                    }
                } else {
                    this.$message({
                        showClose: false,
                        message: '请保存安全域或服务链数据',
                        type: 'warning'
                    })
                }
                if (this.jianitng02 && this.jianitng01) { // 安全域与安全链都保存执行
                    let loadingInstance = this.$loading(this.options)
                    this.$http({
                        url: this.$http.adornUrl(val),
                        method: 'post',
                        data: params
                    }).then(({data}) => {
                        if (data.code === 0) {
                            this.visible = false
                            this.$emit('shutDown', this.visible)
                            loadingInstance.close()
                        } else {
                            loadingInstance.close()
                            this.$message({
                                showClose: false,
                                message: data.msg,
                                type: 'warning',
                            })
                            this.visible = false
                            this.$emit('shutDown', this.visible)
                        }
                    }).catch(error => {
                        loadingInstance.close()
                        this.$message({
                            showClose: false,
                            message: '程序异常,请联系管理员',
                            type: 'warning'
                        })
                        this.$emit('hideClose', false)
                    })
                }
            },
            init (id, details) { // 初始化接口
                switch (details) {
                    case 'xinzeng':
                        this.chooseName = '新增'
                        break
                    case 'xiugai':
                        this.chooseName = '修改'
                        break
                    case 'xiangqing':
                        this.chooseName = '详情'
                        break
                }
                this.visible = true

                this.$nextTick(() => {
                    if (id) {
                        let loadingInstance1 = this.$loading(this.options)
                        this.$http({
                            url: this.$http.adornUrl(`/order/queryOrder/${id}`),
                            method: 'get'
                        }).then(({data}) => {
                            if (data && data.code === 0) {
                                loadingInstance1.close()
                                let listOrder = {
                                    details: details,
                                    domains: data.order
                                }
                                this.allManifold = listOrder
                                this.security = true
                                this.sevData = listOrder
                                this.serShow = true
                            } else {
                                loadingInstance1.close()
                                this.$message({
                                    showClose: false,
                                    message: data.msg,
                                    type: 'warning'
                                })
                            }
                        })
                    } else {
                        this.security = true
                        this.serShow = true
                    }
                })
            }
        },
        components: {
            fireTab,
            serverTab
        }
    }
</script>

<style>
  #canvas {
    height: 580px;
    background: #f1f2f5;
  }
  .adjustInp {
    width: 400px;
  }
  .tabInner {
    width: 100%;
    border: none;
    outline: none;
  }
  .titileBar {
    padding: 6px 10px;
    background: #f1f2f5;
  }
  .butColor {
    border: 1px solid #fff;
    background-color: #999999;
  }
  .el-dialog .el-dialog__body {
    padding: 30px 20px 60px 20xp;
  }
</style>
